Today Preview

1. 正文

今天會講講iOS上(其實已經變全世界)最熱門的App呈現方式：TabBar
但我覺得這個名字太沒有代表性了，BottomNavigation比較好
其實iOS的TabBar(SwiftUI叫TabView)跟Flutter/Android最大的差別就是是否幫你處理要切哪頁
iOS只要指定好哪個tab是哪頁，剩下的全自動模式幫你處理到好⚠️⚠️⚠️

除了介紹基本使用方式
還會另外介紹，快速返回第一頁 跟 彈頁，兩種常見相關應用
請見下方代碼(我有時候就是喜歡用對岸的用語)

1.

先把每頁相關設定組成一個模型
另外，iOS上的tabBar規定最多只能五個(不管你螢幕多大)
超過的部分就會連第五個一起打包成一個叫做'More'的tab

2.

其實就像一開始所說的
一般情況下不用特別去控State
前三個State是為了做到快速返回第一頁(以前UIKit叫做popToRootViewController)
而handler這個變數就是監控你是否點了目前所在的tab

接著講回來基本用法

TabView {
  viewA.tabItme{
    //總算發現Label的另一個家
  }
  viewB.tabItme{
  
  }
  viewC.tabItme{
  
  }
}

這樣就好了(當然我這裡是搭配ForEach使用)
每一頁都是一組NavigationView
除了中間那頁(index==2)其實是要彈另外的頁面出來，所以就特別處理

3.

其他四頁點了就會一直跳下一頁
而這四頁都給了一個UUID並結合.onChange()
一但有連點兩次的情形
就檢查如果是自己這頁，就賦予新的id，重生了～所以跳回這頁XD
以上概念源自Design+Code

4.

這裡的.onChange()則是負責監聽是否點了Call to Action(如果要做成特殊樣式請看)
延遲一秒則是希望頁面彈完後再偷偷切換背景tab

2. 對照表

Tomorrow Preview

跨界學習系列文章

Android版：iOS Developer Learning Android. Lesson 17 - BottomNavigationView + Fragment (人家的Navigation是長在下面的喔～)
Flutter版：iOS Developer Learning Flutter. Lesson16 底部導航與頁籤

https://github.com/mark33699/FDLS